<!-- 书架 -->
<script>
import navfooterView from "../components/navfooterView.vue";
import { reactive, toRefs } from "@vue/reactivity";
import { computed, ref, onMounted } from "vue";
import { getBanner } from "../api/home.js";
import { Toast } from "vant";
export default {
  setup() {
    const list = reactive({
      lists: [], //初始化数据
      checked: false,
      marquee: null,
      Readingarr: null, //阅读记录数组
      //  Readingname:[],//阅读章节名字
      //  Readingfalg:false//阅读章节显示隐藏
    });

    onMounted(() => {
      getBanner().then((data) => {
        //获取数据
        list.marquee = data.data[5].lists;
        console.log("/获取数据", list.marquee);
      });
      //阅读记录
      if (window.localStorage.getItem("Reading") == null) {
        window.localStorage.setItem("Reading", "[]");
      }
      let Reading = window.localStorage.getItem("Reading");
      list.Readingarr = JSON.parse(Reading);
      if (localStorage.Collection) {
        list.lists = JSON.parse(localStorage.getItem("Collection"));
      }

      console.log(list.Readingarr, "112");
      console.log(list.lists, "221");

      list.lists.forEach((item) => {
        list.Readingarr.forEach((ele) => {
          if (item.id == ele.bookId) {
            item.Readingname = ele.name;
          }
        });
      });
      console.log(list.lists);
    });
    if (localStorage.Collection) {
      list.lists = JSON.parse(localStorage.getItem("Collection"));
    }
    // 单个删除
    const del = (id) => {
      let index = list.lists.findIndex((item) => item.id == id);
      list.lists.splice(index, 1);
      localStorage.setItem("Collection", JSON.stringify(list.lists));
      Toast("成功删除");
    };
    // 全选
    const toggleAll = computed({
      get: () => {
        return list.lists.every((item) => {
          return item.checked;
        });
      },
      set: (value) => {
        list.lists.forEach((item) => {
          item.checked = value;
        });
      },
    });
    // 弹框
    const show = ref(false);
    const showPopup = () => {
      if (list.lists) {
        show.value = true;
      } else {
        Toast("暂无内容");
      }
    };
    // 删除选中
    const delAll = () => {
      localStorage.setItem(
        "Collection",
        JSON.stringify(
          (list.lists = list.lists.filter((item) => {
            return !item.checked;
          }))
        )
      );
      Toast("成功删除");
    };

    return {
      ...toRefs(list),
      show,
      showPopup,
      del,
      toggleAll,
      delAll,
    };
  },
  components: {
    navfooterView,
  },
};
</script>


<template>
  <div class="bookshelf">
    <!-- 顶部标题 -->
    <div class="top_bar">
      <p class="left_title">书架</p>
      <div class="right_icon">
        <!-- 搜索 -->
        <router-link custom to="/searchView" v-slot="{ href, navigate }">
          <span
            :href="href"
            @click="navigate"
            class="iconfont icon-sousuo"
          ></span>
        </router-link>
        <!-- 更多 -->
        <van-cell is-link @click="showPopup">批量管理</van-cell>
      </div>
    </div>
    <!-- <van-popup v-model:show="show"> -->
    <van-popup
      v-model:show="show"
      closeable
      position="right"
      :style="{ height: '100%' }"
    >
      <div class="book_main">
        <div class="all_box">
          <p>批量管理</p>
          <!-- 全选 -->
          <input
            id="toggle-all"
            class="toggle-all"
            type="checkbox"
            v-model="toggleAll"
          />
          <div for="toggle-all" class="all" @click="toggleAll">全选</div>
        </div>
        <div class="book" v-for="(item, index) in lists" :key="index">
          <div class="book_img">
            <router-link
              :to="'/details?id=' + item.id"
              custom
              v-slot="{ href, navigate }"
            >
              <img :href="href" @click="navigate" :src="item.img" alt="" />
            </router-link>
          </div>
          <div class="book_text">
            <div class="book_name">{{ item.name }}</div>
            <p class="progress">{{ item.author }}</p>
            <p class="chapter" v-if="!item.Readingname">未读</p>
            <p class="chapter" v-if="item.Readingname">
              阅读至：{{ item.Readingname }}
            </p>
          </div>
          <input type="checkbox" v-model="item.checked" />
        </div>
        <div class="del" @click="delAll" v-if="lists.length">删除</div>

        <router-link custom to="/home" v-slot="{ href, navigate }">
          <div
            class="wu"
            :href="href"
            @click="navigate"
            v-if="lists.length == 0"
          >
            暂无书籍，快去书城
            <p style="color: skyblue">逛逛吧!</p>
          </div>
        </router-link>
      </div>
    </van-popup>
    <div class="bookshelf_box">
      <div class="book_title">
        <!-- <van-notice-bar scrollable text="[免费! 90%读者在看]特战之王" /> -->
        <van-notice-bar :scrollable="false">
          <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="3000"
            :touchable="false"
            :show-indicators="false"
          >
            <router-link
              custom
              v-for="(item, index) in marquee"
              :key="index"
              :to="'/details?id=' + item.bookId"
              v-slot="{ href, navigate }"
            >
              <van-swipe-item :href="href" @click="navigate">
                [90%读者在看] {{ item.bookName }}。
              </van-swipe-item>
            </router-link>
          </van-swipe>
        </van-notice-bar>
        <!-- <p>[免费! 90%读者在看]特战之王"</p> -->
        <!-- <van-cell is-link @click="showPopup">批量管理</van-cell> -->
      </div>
      <div class="book_main">
        <van-swipe-cell v-for="(item, index) in lists" :key="index">
          <router-link
            :to="'/details?id=' + item.id"
            custom
            v-slot="{ href, navigate }"
          >
            <div class="book">
              <div class="book_img" :href="href" @click="navigate">
                <img  :src="item.img" alt="" />
              </div>
              <div class="book_text" :href="href" @click="navigate">
                <div class="book_name">{{ item.name }}</div>
                <p class="progress">{{ item.author }}</p>
                <p class="chapter" v-if="!item.Readingname">未读</p>
                <p class="chapter" v-if="item.Readingname">
                  阅读至：{{ item.Readingname }}
                </p>
              </div>
            </div>
          </router-link>

          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="del(item.id)"
            />
          </template>
        </van-swipe-cell>

        <div class="add_box">
          <router-link custom to="/home" v-slot="{ href, navigate }">
            <div class="add_book" :href="href" @click="navigate">+</div>
            <p>添加书籍</p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
  <navfooterView></navfooterView>
</template>
<style lang="scss" scoped>
::v-deep {
  .van-popup {
    width: 100%;
    // position: relative;
    .van-popup__close-icon--top-right {
      left: 16px;
      display: block;
      width: 35px;
    }

    .book_main {
      height: 97%;
      // padding: 20px 0;
      position: relative;
      .wu {
        text-align: center;
        padding: 50px;
      }
      .del {
        margin-top: 20px;
        padding: 10px 0;
        text-align: center;
        background-color: red;
        color: #fff;
        font-size: 16px;
        position: sticky;
        bottom: 0;
        left: 25%;
        width: 50%;
      }
      .all_box {
        display: flex;
        justify-content: flex-end;
        padding: 16px 16px;
        position: relative;
        .toggle-all {
          position: absolute;
          right: 40px;
          top: 22px;
          border: none; /* Mobile Safari */
          opacity: 0;
          // width: 1px;
          // height: 1px;
        }
        .all {
          color: red;
          padding: 0 16px;
          margin-left: 80px;
        }
      }
      .book {
        margin-top: 14px;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        border-bottom: 1px solid #f8f8f8;
        .book_img {
          height: 95px;
          border-radius: 4px;
          overflow: hidden;
          margin-right: 10px;
          margin-bottom: 10px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
        }
        .book_text {
          width: 232px;
          // margin-right: 140px;
          .book_name {
            margin-top: 8px;
            margin-bottom: 10px;
            font-size: 18px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .progress {
            font-size: 13px;
            margin: 0;
            color: #c7c7c8;
            margin-bottom: 10px;
          }
          .chapter {
            font-size: 12px;
            color: #c7c7c8;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .book:nth-child(3n) {
        margin-right: 0;
      }

      .add_box {
        width: 97px;
        margin-top: 20px;
        padding: 0 5px;
        .add_book {
          text-align: center;
          line-height: 95px;
          font-size: 40px;
          width: 71px;
          color: #d5d5d5;
          font-family: "Courier New", Courier, monospace;
          border-radius: 4px;
          border: 2px dashed #b3aeae;
          height: 95px;
        }
        p {
          margin: 0;
          font-size: 12px;
          color: #a0a0a0;
          margin-top: 10px;
        }
      }
    }
  }
  .van-notice-bar {
    background: none;
    color: #35343c;
    padding: 0;
  }
}
.bookshelf {
  padding-bottom: 70px;
  // 顶部标题
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
  .top_bar {
    position: fixed;
    // height: 68px;
    top: 0;
    left: 0;
    background-color: #fff;
    padding: 12px;
    z-index: 99;

    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left_title {
      display: inline-block;
      font-size: 16px;
      color: #18191c;
    }
    .right_icon {
      display: flex;
      align-items: center;

      .iconfont {
        font-size: 21px;
      }
      .icon-sousuo {
        margin-right: 18px;
      }
    }
  }
  // 顶部标题结束
  // 签到
  .signin_box {
    // width: 137px;
    // height: 98px;
    margin-bottom: 18px;
    .signin {
      border-width: 2px 2px 1px 2px;
      border-radius: 6px;
      background: url("../assets/img/aky.png") no-repeat;
      display: inline-block;
      font-size: 12px;
      position: relative;
      padding: 14px 34px 45px 11px;
      p {
        // display: inline-block;
        margin: 0;
        // text-align: left;
      }
      .sign {
        font-size: 14px;
        padding-left: 5px;
        margin-bottom: 7px;
        color: #393939;
        font-weight: 600;
      }
      .gold {
        transform: scale(0.9);
        color: #cacaca;
      }
      .immediately {
        position: absolute;
        bottom: 9px;
        right: -2px;
        border: 1px solid #b16ae0;
        border-radius: 20px 0 0 20px;
        padding: 4px 7px 4px 5px;
        background-image: linear-gradient(#d97cea, #9766fc);
        // line-height: ;
        display: flex;
        img {
          width: 16px;
          height: 16px;
        }
        p {
          color: #fff;
          transform: scale(0.8);
        }
      }
    }
  }

  // 书架
  .bookshelf_box {
    // width: 100%;
    height: 100%;
    padding: 0 12px;
    margin-top: 68px;
    box-sizing: border-box;
    .book_title {
      margin: 0;
      font-size: 12px;
      color: #35343c;
      .iconfont {
        color: #ddd;
      }
      .notice-swipe {
        height: 40px;
        line-height: 40px;
      }
    }
    .book_main {
      height: 100%;
      // display: flex;
      // flex-flow: wrap;
      .book {
        margin-top: 10px;
        margin-right: 14px;
        padding: 0 5px;
        box-sizing: border-box;
        display: flex;
        border-bottom: 1px solid #f8f8f8;
        .book_img {
          height: 95px;
          border-radius: 4px;
          overflow: hidden;
          margin-right: 10px;
          margin-bottom: 10px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
        }
        .book_text {
          // width: 87px;
          .book_name {
            margin-top: 8px;
            margin-bottom: 10px;
            font-size: 18px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .progress {
            font-size: 13px;
            margin: 0;
            color: #c7c7c8;
            margin-bottom: 10px;
          }
          .chapter {
            font-size: 12px;
            color: #c7c7c8;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .book:nth-child(3n) {
        margin-right: 0;
      }
      .add_box {
        width: 97px;
        margin-top: 20px;
        padding: 0 5px;
        .add_book {
          text-align: center;
          line-height: 95px;
          font-size: 40px;
          width: 71px;
          color: #d5d5d5;
          font-family: "Courier New", Courier, monospace;
          border-radius: 4px;
          border: 2px dashed #b3aeae;
          height: 95px;
        }
        p {
          margin: 0;
          font-size: 12px;
          color: #a0a0a0;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>